<template>
  <div class="search-box">
    <input class="search-txt" type="text" name="oasis-search" placeholder="Type to search" v-model="input" @keyup.13="goSearch"/>
    <a class="search-btn" :href="search">
      <i class="fas fa-search"></i>
    </a>
  </div>
</template>

<script>
export default {
  name: 'SearchBox',
  props: {

  },
  data() {
    return {
      input: ''
    };
  },
  computed: {
    search() {
      const input = this.input.trim();
      if (input.length > 0) {
        return '/#/search' + '?str=' + input;
      }
      return '#';
    }
  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {
    goSearch() {
      const input = this.input.trim();
      if (input == this.$route.query.str) {
        alert('input duplicated')
        console.log('input duplicated');
      }
      if (input.length > 0) {
        this.$router.push({
          path: '/search',
          query: {
            str: input
          }
        });
      }
    }
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
  .search-box {
    background: #2f3640;
    height: 28px;
    border-radius: 28px;
    padding: 10px;

    .search-txt {
      border: none;
      background: none;
      outline: none;
      float: left;
      padding: 0;
      color: white;
      font-size: 16px;
      transition: 0.4s;
      line-height: 28px;
      width: 0;
    }

    .search-btn {
      color: #e84118;
      float: right;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #2f3640;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 0.4s;
      text-decoration: none;
    }

    &:hover, &:focus-within {
      & > .search-txt {
        width: 240px;
        padding: 0 6px;
      }

      & > .search-btn {
        background: white;
      }
    }

    &:hover, &:focus-within {
      -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
      border-color:rgb(40, 89, 104);
      -webkit-box-shadow:0 0 6px rgb(217, 255, 0);
    }

    
  }
</style>
